<template>
  <div>
    <el-form ref="form" :model="formData" inline size="mini">
      <el-form-item>
        <el-input
          v-model="formData.materialName"
          placeholder="请输入物料名称"
        ></el-input>
      </el-form-item>
      <el-form-item>
        <el-select
          v-model="formData.materialType"
          placeholder="请选择物料类型"
          clearable
        >
          <el-option
            :label="item.label"
            :value="item.label"
            v-for="(item, index) in materialType"
            :key="index"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="searchMaterialStorage"
          >查询</el-button
        >
      </el-form-item>
    </el-form>

    <el-table :data="tableData" style="width: 100%" border>
      <el-table-column
        :prop="item.prop"
        :label="item.label"
        align="center"
        v-for="(item, index) in materialStorageTableHeard"
        :key="index"
      >
      </el-table-column>
      <el-table-column label="操作" prop="prop" width="120" align="center">
        <template slot-scope="{ row }">
          <el-button type="text" size="small" @click="addMaterialStorage(row)"
            >新增批次</el-button
          >
        </template>
      </el-table-column>
      <!-- 无数据 -->
      <template slot="empty">
        <div class="noData" v-show="tableData.length === 0">
          <!--  v-show="data.length===0" -->
          <img src="@/assets/images/noData.png" />
          <p>暂无数据</p>
        </div>
      </template>
    </el-table>
    <Pagination :total="total" @pagination="handlePage" :page.sync="formData.pageNum"></Pagination>
    <el-dialog title="新增批次" :visible.sync="materialDialog" width="40%">
      <div>
        <el-row>
          <el-form
            ref="materialForm"
            label-width="80px"
            :model="materialForm"
            size="mini"
            :rules="materialRules"
          >
            <el-col :span="12">
              <el-form-item label="物料名称" prop="materialId">
                <el-input
                  :disabled="true"
                  v-model="materialForm.materialName"
                  placeholder="请输入物料名称"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="规格" prop="specification">
                <el-input
                  :disabled="true"
                  v-model="materialForm.specification"
                  placeholder="请输入物料规格"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="入库类型" prop="storageType">
                <el-select
                  v-model="materialForm.storageType"
                  placeholder="请选择入库类型"
                >
                  <el-option
                    :label="item"
                    :value="item"
                    v-for="(item, index) in entryType"
                    :key="index"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="入库数量" prop="storageNumber">
                <el-input
                  v-model="materialForm.storageNumber"
                  placeholder="请输入物入库数量"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="物料批次" prop="batchNumber">
                <el-input
                  v-model="materialForm.batchNumber"
                  placeholder="请输入物料批次"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="批次单价" prop="batchPrice">
                <el-input
                  v-model="materialForm.batchPrice"
                  placeholder="请输入批次单价"
                >
                  <p slot="suffix" style="display: inline">元</p>
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="入库日期" prop="storageDate">
                <el-date-picker
                  style="width: 160px"
                  v-model="materialForm.storageDate"
                  type="date"
                  placeholder="选择日期"
                  :picker-options="pickerOptionsForm"
                  value-format="yyyy-MM-dd HH:mm:ss"
                >
                </el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="生产日期" prop="dateOfManufacture">
                <el-date-picker
                  style="width: 160px"
                  v-model="materialForm.dateOfManufacture"
                  placeholder="选择日期"
                  :picker-options="pickerOptionsForm"
                  value-format="yyyy-MM-dd HH:mm:ss"
                >
                </el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="供应商" prop="supplierId">
                <el-select
                  v-model="materialForm.supplierId"
                  placeholder="请选择供应商"
                >
                  <el-option
                    :label="item.name"
                    :value="item.id"
                    v-for="item in supplierList"
                    :key="item.id"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-form>
        </el-row>
      </div>
      <div slot="footer">
        <el-button @click="materialDialog = false">取 消</el-button>
        <el-button type="primary" @click="confirm">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { materialStorageTableHeard } from "./constant/index.js";
import { list } from "@/api/material-management/material-storage";
import { mixins } from "./mixin/index.js";
export default {
  mixins: [mixins],
  data() {
    return {
      total: 0,
      pickerOptionsForm: {
        disabledDate(time) {
          return time.getTime() > Date.now() - 8.64e6;
        },
      },
      formData: {
        materialName: "",
        materialType: "",
        pageNum: 1,
        pageSize: 10,
      },
      materialForm: {
        materialName: "",
        materialId: null,
        specification: "",
        storageDate: "",
        storageType: "",
        storageNumber: "",
        batchNumber: "",
        batchPrice: "",
        dateOfManufacture: "",
        supplierId: null,
      },
      tableData: [],
      supplierList: [],
      materialStorageTableHeard,
      initForm: {},
    };
  },
  created() {
    this.initForm = this.$cloneDeep(this.materialForm);
    this.getTableData();
  },
  methods: {
    async getTableData() {
      let res = await list(this.formData);
      if (res.code == 200) {
        this.tableData = res.data.list;
        this.total = res.data.total;
      }
    },
    searchMaterialStorage() {
      this.formData.pageNum = 1
      this.getTableData();
    },
    addMaterialStorage(row) {
      //console.log(row)
      this.materialForm = this.$cloneDeep(this.initForm);
      this.materialDialog = true;
      this.$nextTick(() => {
        this.$refs.materialForm.clearValidate();
      });
      //this.materialForm = this.$cloneDeep(row)
      const {
        materialName,
        materialId,
        specification,
        unitPrice,
      } = row;
      this.materialForm.materialId = materialId;
      this.materialForm.materialName = materialName;
      this.materialForm.specification = specification;
      this.materialForm.batchPrice = unitPrice;
    },
  },
};
</script>

<style lang="scss" scoped></style>
